<template>
  <div class="hotproblem">
    <TitleUserFeedback></TitleUserFeedback>
    <div class="h-body">
      <h2>热门问题</h2>
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="2000"
          :show-indicators="false"
        >
          <van-swipe-item @click="isshow = 1">如何添加或取消收藏收藏</van-swipe-item>
          <van-swipe-item @click="isshow = 2">实在不知道写什么了，将就看吧</van-swipe-item>
          <van-swipe-item @click="isshow = 3">你怎么看待俄乌战争</van-swipe-item>
        </van-swipe>
      </van-notice-bar>

      <div class="h-text">
        <p v-if="isshow == 0">
            <span>快来问问我吧~</span><br>
        </p>
        <p v-if="isshow == 1">收藏：<br>
            1.点击进入你想收藏的菜谱 <br>
            2.点击右上角小星星收藏菜谱 <br>
            3.在个人页面点击 菜谱收藏 即可查看已收藏菜谱 <br>
            <br>
            取消收藏：<br>
            1.点击右上角垃圾桶<br>
            2.删除选中的菜谱<br>
        </p>
        <p v-if="isshow == 2">嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟
            嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟
            嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟</p>
        <p v-if="isshow == 3">啦啦啦啦拉拉拉啊拉啊啦啦啦拉拉
            啦啦啦啦拉拉拉啊拉啊啦啦啦拉拉
            啦啦啦啦拉拉拉啊拉啊啦啦啦拉拉
            啦啦啦啦拉拉拉啊拉啊啦啦啦拉拉
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import TitleUserFeedback from "./TitleUserFeedback.vue";

export default {
    data() {
        return {
            isshow:0
        }
    },
  components: {
    TitleUserFeedback,
  },
};
</script>

<style lang="less" scoped>
.h-body {
  h2 {
    padding: 12px 10px;
    font-size: 17px;
    color: #777777;
  }

  .h-text {
    width: 100%;
    height: 120px;
    background-color: white;
    color: #828282;
    font-size: 14px;
    padding: 20px 10px;
  }
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>